<!--轮播图管理页面-->
<template>
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="120px" align="center"></el-table-column>
    <el-table-column label="轮播图" width="450px" align="center">
      <template #default="scope">
        <img :src="BASE_URL+scope.row.imgUrl" style="width:100%;">
      </template>
    </el-table-column>
    <el-table-column label="发布时间" prop="createTime" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

//发请求获取后台管理系统轮播图的数据并展示在轮播图管理页面上
//http://localhost:8080/v1/banners/admin
//在 Controller层定义方法listForAdmin
//在 Mapper层定义方法selectForAdmin
const arr = ref([]);
onMounted(()=>{
  axios.get(BASE_URL+'/v1/banners/admin').then((response)=>{
    if(response.data.code==2001){
      arr.value = response.data.data;
      console.log(arr.value);
    }
  })
})

const del = (i,banner)=>{
  //地址:http://localhost:8080/v1/banners/轮播图id/delete
  //deleteById 注意:删除同时也要把磁盘中的图片删除!
  if(confirm('您确认要删除此轮播图吗?')) {
    axios.post(BASE_URL + '/v1/banners/'+banner.id+'/delete')
        .then((response) => {
          if (response.data.code == 2001) {
            arr.value.splice(i, 1);
            ElMessage.success('轮播图删除成功!');

          }
        })
  }
}
</script>

<style scoped>

</style>